<template>
		<div class="product-list">
			<a href="#" class="xihuan">
			    <img :src="xihuan" alt="" />
			    <span>喜欢</span>
			</a>
			<a href="#" class="gouwuche">
			    <span>加入购物车</span>
			    <img :src="gouwuche" alt="" />
			</a>
		    <a href="#"><img :src="productmanimg" alt="" /></a>
		    <p class="list-title"><a href="#">小米MIX 2 全网通版 8GB内存 全陶瓷尊享版</a></p>
		    <p class="list-price">2799元<del>4699元</del></p>
		    <a href="#"><img class="min-img" :src="productminimg" alt="" /></a>
		    <p class="hong jingxi">6折促销</p>
		    <p class="lan jingxi">有赠品</p>
		</div>
</template>




<script>
import productmanimg from '@/assets/img/pms_product_list_man1.jpg'
import productminimg from '@/assets/img/pms_product_list_min1.jpg'
import xihuan from '@/assets/img/xihuan.png'
import gouwuche from '@/assets/img/gouwuche.png'
export default{
  data () {
    return {
		productmanimg,
		xihuan,
		gouwuche,
		productminimg
	}
  }
}

</script>




<style scoped>
/*商品列表*/
.product div.product-list{
	float:left;
	position: relative;
	text-align: center;
 	width: 284px;
 	height: 385px;
 	margin-right: 16px;
 	margin-bottom: 14px;
 	font-size:14px;
 	background-color: #fff;
 	padding-top:43px ;
 }
 
 .xihuan{
 	position:absolute;
 	left:25px;
 	top:20px;
 	width: 60px;
 	height: 0;
 	overflow:hidden;
 }
.xihuan span{
	display: block;
	float: right;
	color: #666666;
	line-height: 25px;
	opacity:0;
}
.product div.product-list:hover .xihuan{
 	transition:all 0.4s linear;
 	height: 25px;
 }
.product div.product-list .xihuan:hover span{
 	transition:all 0.4s linear;
 	opacity:1;
 }
 
.gouwuche{
 	position:absolute;
 	left: 150px;
 	top:20px;
 	width: 100px;
 	height:0;
 	overflow:hidden;
 }
 .gouwuche span{
	display: block;
	float: left;
	color: #666666;
	line-height: 25px;
	opacity:0;
}
.product div.product-list:hover .gouwuche{
 	transition:all 0.4s linear;
 	height: 25px;
 }
.product div.product-list .gouwuche:hover span{
 	transition:all 0.4s linear;
 	opacity:1;
 }
.product div.product-list p.list-title{
  	margin-bottom: 3px;
  	margin-top: 40px;
  }
.product div.product-list p.list-title a{
  	color: rgb(66,66,66);
  }
.product div.product-list .list-price{
  	margin-bottom: 15px;
  	color: #ff6700;
  }
.product div.product-list .list-price del{
  	color: #b0b0b0;
  	padding-left: 5px;
  	text-decoration:line-through;  /*删除线*/
  	
  }
.product div.product-list a img.min-img{
   	border: 1px solid #e0e0e0;
   	margin-bottom: 13px;
   }
.product div.product-list a img.min-img:hover{
   	border-color: #ff6700;
   }
.product div.product-list p.jingxi{
   	background: #e53935;
   	color: #fff;
   	text-align: left;
   	padding-left:20px;
   	float: left;
   	width: 264px;
   	font-size:12px;
   	line-height: 20px;
   }
.product div.product-list p.hong{
   	background: #e53935;
   }
.product div.product-list p.lan{
   	background: #2196f3;
   }
.product div.product-list p.lv{
   	background: #83c44e;
   }
.display{
   	display: none;
}
.visibility{
	visibility:hidden
}

.product div.product-list:hover{
 	box-shadow:1px 5px 20px 3px #e0e0e0;
 	transition:all 0.4s linear;
 }
</style>